<div class="space-y-4">
  <form (ngSubmit)="handleSubmit()" class="flex gap-2">
    <input
      type="text"
      name="New Todo"
      [(ngModel)]="newTodo"
      placeholder="What needs to be done?"
      class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <button
      type="submit"
      class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
    >
      Add
    </button>
  </form>

  <div class="flex gap-2">
    <button
      (click)="service.updateFilter('all')"
      class="px-4 py-2 rounded-lg"
      [class]="
        service.filter() === 'all' ? 'bg-blue-500 text-white' : 'bg-gray-200'
      "
    >
      All
    </button>
    <button
      (click)="service.updateFilter('done')"
      class="px-4 py-2 rounded-lg"
      [class]="
        service.filter() === 'done' ? 'bg-blue-500 text-white' : 'bg-gray-200'
      "
    >
      Done
    </button>
    <button
      (click)="service.updateFilter('todo')"
      class="px-4 py-2 rounded-lg"
      [class]="
        service.filter() === 'todo' ? 'bg-blue-500 text-white' : 'bg-gray-200'
      "
    >
      To-Do
    </button>
  </div>
</div>
